<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>21-Vue学生管理系统</title>
  <script src="js/vue.js"></script>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      #app {
          width: 800px;
          margin: 50px auto;
      }

      table {
          width: 100%;
          background: #000;
      }

      table tr {
          background: #fff;
      }

      form {
          width: 100%;
          display: flex;
          justify-content: space-between;
      }
  </style>
</head>
<body>
<div id="app">
  <form v-show="isShow">
    <input type="text" placeholder="请输入序号" v-model="person.id"/>
    <input type="text" placeholder="请输入名称" v-model="person.name"/>
    <input type="text" placeholder="请输入分数" v-model="person.score"/>
    <input type="submit" @click.prevent="add" value="新增"/>
    <input type="submit" @click.prevent="query" value="查询"/>
  </form>
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>时间</th>
      <th>操作</th>
    </tr>
    <tr v-for="(person, index) in persons">
      <td><input type="text" v-model="person.id" :disabled="isDisabled"/></td>
      <td><input type="text" v-model="person.name" :disabled="isDisabled"/></td>
      <td><input type="text" v-model="person.score" :disabled="isDisabled"/></td>
      <td><input type="text" :value="person.time | dateFormat" disabled/></td>
      <td>
        <a href="#" @click.prevent="edit">编辑</a>
        <a href="#" @click.prevent="remove(index)">删除</a><br/>
        <a href="#" @click.prevent="toggle">更多操作</a>
      </td>
    </tr>
  </table>
</div>
</body>
<script>
  <!-- 日期格式化 过滤器 -->
  Vue.filter("dateFormat", function (value, format) {
    let date = new Date(value)
    let year = date.getFullYear()
    let month = date.getMonth() + 1 + ""
    let day = date.getDay() + ""
    let hour = date.getHours() + ""
    let minute = date.getMinutes() + ""
    let second = date.getSeconds() + ""
    if (format && format === "yyyy-MM-dd") {
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
    }
    return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`
  })

  /* 1. 创建 vue 实例对象 */
  let vm = new Vue({
    // 2. 声明vue的实例对象控制页面的哪个区域
    el: '#app',
    // 3. 声明vue控制区域可以使用的数据
    data: {
      isDisabled: true,
      isShow: false,
      persons: [{
        id: 1,
        name: "zs",
        score: "99",
        time: Date.now()
      }, {
        id: 2,
        name: "ls",
        score: "88",
        time: Date.now()
      }, {
        id: 3,
        name: "ww",
        score: "88",
        time: Date.now()
      }],
      person: {
        id: "",
        name: "",
        score: ""
      }
    },
    methods: {
      edit() {
        this.isDisabled = !this.isDisabled
      },
      toggle() {
        this.isShow = !this.isShow
      },
      remove(index) {
        this.persons.splice(index, 1)
      },
      add() {
        this.person.time = Date.now()
        this.persons.push(this.person)
        this.person = {
          id: "",
          name: "",
          score: ""
        }
      },
      query() {
        let search = this.persons.filter((person) => {
          if (person.score === this.person.score) {
            return true
          }
        })
        this.persons = search
      }
    }
  })
</script>
</html>
